<template>
  <el-dialog :visible.sync="dialogVisible" title="创建消息" @close="dialogVisible=false">
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="账户：" prop="userIds">
        <el-input
          v-model="formData.userIds"
          :disabled="!!userIds"
          type="textarea"
          placeholder="填写用户ID，一行一个"
        />
      </el-form-item>
      <el-form-item label="消息内容：" prop="content">
        <el-input v-model="formData.content" type="textarea" placeholder="请输入消息内容" />
      </el-form-item>
      <el-form-item label="推送消息内容：" prop="pushContent">
        <el-input v-model="formData.pushContent" type="textarea" placeholder="请输入推送消息内容：" />
      </el-form-item>
      <el-form-item label="备注 ：" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="备注" />
      </el-form-item>
      <el-form-item label="是否发送推送消息 ：" prop="push">
        <el-switch
          v-model="formData.push"
          active-text="发送"
          inactive-text="不发送"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userIds: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      formData: {
        userIds: '',
        content: null,
        pushContent: null,
        remark: null,
        push: false
      },
      rules: {
        userIds: [{ required: true, message: '不能为空' }],
        content: [{ required: true, message: '不能为空' }],
        pushContent: [{ required: true, message: '不能为空' }],
        push: [{ required: true, message: '不能为空' }]
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.formData.userIds = this.userIds
      }
    }
  },
  methods: {
    onOK() {
      this.$refs.forbidForm.validate(valid => {
        if (valid) {
          const uids = (this.formData.userIds + '').split('\n').map(item => Number(item))
          this.$emit('success', Object.assign({}, this.formData, { uids }))
        }
      })
    }
  }
}
</script>
